<template>
  <div class="bods">
    <!-- 评论 -->
    <div>
      <div class="top">
        <div class="sj">
          <search @getTreeData="testData"></search>
        </div>
      </div>
      <div class="sj conton">
        <dir style="height: 10px"></dir>
        <ul class="nanv">
          <li
            @click="quanbu"
            :style="{
              background: steat ? ' rgb(109, 168, 223)' : 'rgb(255, 255, 255)',
            }"
          >
            全部
          </li>
          <li
            @click="kantu"
            :style="{
              background: !steat ? 'rgb(109, 168, 223)' : 'rgb(255, 255, 255)',
            }"
          >
            看图
          </li>
        </ul>
      </div>
      <!-- 评论列表栏目 -->
      <div class="bags">
        <div>
          <ul
            class="comment"
            v-for="(item, index) in pingldata"
            :key="index"
            :title="index"
            @click.stop="toComment(index)"
          >
            <li style="height: 10px"></li>
            <!-- 头像 -->
            <li class="xingxi">
              <div class="logo">
                <img :src="item.userInfo.avatarUrl" alt="" />
              </div>
              <div class="text">
                <span>{{ item.userInfo.nickName }}</span>
                <span>{{ item.addTime | formatCtime }}</span>
              </div>
            </li>
            <li class="texttlie">
              <span>{{ item.content }}</span>
            </li>
            <li class="tupiao" v-if="item.picList.length != 0">
              <div
                class="tupm"
                v-for="(i, a) in item.picList"
                :key="a"
                @click.stop="chakan(i)"
              >
                <img :src="i" alt="" srcset="" />
              </div>
            </li>
            <li class="pingl">
              <div class="gengos">
                <img src="../../assets/gdw.png" alt="" />
              </div>
              <div class="logos">
                <img src="../../assets/pl1.png" alt="" />
              </div>
              <div class="dianz">
                <img src="../../assets/dianz.png" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div>
      <!-- 遮罩 -->
      <van-overlay :show="show" @click="show = false" z-index="99">
        <div class="wrapper" @click.stop>
          <div class="block">
            <ul>
              <li class="tu">
                <img :src="imgs" alt="" />
                <span class="guanb" @click="gb">关闭</span>
              </li>
            </ul>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import { List } from "vant";
import { Overlay } from "vant";
import search from "@/components/Search.vue";
import API from "../../http/API";
export default {
  name: "comment",
  components: {
    search,
    [Overlay.name]: Overlay,
    [List.name]: List,
  },
  data() {
    return {
      loading: false,
      finished: false,
      valueId: this.$route.query.userId,
      pingldata: [],
      //   分页
      zonshu: "",
      index: 1,
      steat: true,
      show: false,
      imgs: "",
      //
      mos: 0,
    };
  },
  deactivated() {
    // window.removeEventListener("scroll", this.handleScroll);
  },
  activated() {
    // this.guanb();
  },
  methods: {
    http(e) {
      this.$get(API.GET_COMMENT_LIST, {
        //                 ①type：类型 ID。 如果是 0，则查询商品评论；如果是 1，则查询专题
        // 评论。
        // ②valueId：商品或专题 ID。如果 type 是 0，则是商品 ID；如果 type 是
        // 1，则是专题 ID
        // ③showType：显示类型。如果是 0，则查询全部；如果是 1，则查询有
        // 图片的评论。
        // ④page：分页页数，默认 1
        // ⑤limit：每页条数，默认 10
        type: 0,
        showType: e,
        valueId: this.valueId,
        page: this.index,
      }).then((res) => {
        console.log(res.data.pages);
        this.zonshu = res.data.pages;
        this.index++;
        this.pingldata = this.pingldata.concat(res.data.list);
      });
    },
    quanbu() {
      this.steat = true;

      this.pingldata = [];
      this.mos = 0;
      this.index = 1;
      this.http(this.mos);
    },
    kantu() {
      this.steat = false;
      this.pingldata = [];
      this.mos = 1;
      this.index = 1;
      this.http(this.mos);
    },
    chakan(e) {
      console.log(e);
      this.imgs = e;
      this.show = true;
      console.log("123564");
    },
    gb() {
      this.show = false;
    },
    lazyLoading() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      
      this.$route.meta.Yaxis =   window.pageYOffset;;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("滚动到底部，触发");

        if (this.index <= this.zonshu) {
          console.log(this.index);

          this.mai();
        }
      }
    },
    mai() {
      setTimeout(() => {
        this.http(this.mos);
      }, 500);
    },
    testData() {
      this.$router.go(-1);
    },
    toComment(index) {
      this.$router.push({
        path: "/pingluxiangq",

        query: { user: JSON.stringify(this.pingldata[index]) },
      });
    },
    handleScroll() {
     
    },
    guanb() {
      window.addEventListener("scroll", this.handleScroll);
    },
  },

  created() {
    this.http(this.mos);
    window.addEventListener("scroll", this.lazyLoading); // 滚动到底部，再加载的处理事件
  },
  //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
  destroyed() {
    window.removeEventListener("scroll", this.lazyLoading);
    //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
  },

  filters: {
    // 定义局部过滤器

    // 格式化时间
    formatCtime(dateStr) {
      // console.log(dateStr)

      let data = dateStr.split(" ");
      data.pop();

      return data[0];
    },
  },
};
</script>

<style lang="less" scoped>
.bods {
  height: 100%;

  background-color: @background;
  .top {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
    background-color: rgb(255, 255, 255);
  }
  .conton {
    margin-top: 40px;
    margin-left: 10px;
    margin-right: 10px;
    .nanv {
      height: 30px;
      display: flex;
      li {
        height: 30px;
        width: 40px;

        text-align: center;
        line-height: 30px;
        margin-right: 5px;
        border-radius: 5px;
      }

      .yans {
        background-color: rgb(240, 137, 189);
      }
      .yan {
        background-color: rgb(255, 255, 255);
      }
    }
  }
  .bags {
    // margin-top: 40px;
    background-color: rgb(243, 243, 243);

    .comment {
      //   margin-top: 10px;
      // margin-top: 20px;
      border-radius: 10px;
      margin-top: 10px;
      background-color: rgb(255, 255, 255);
      padding-bottom: 10px;
      border-bottom: 1px solid rgb(207, 205, 205);
      // color: rgb(109, 168, 223);
      li {
        margin-left: 10px;
        margin-right: 10px;
      }
      //   border: 1px solid rgb(207, 205, 205);
      .xingxi {
        display: flex;
        align-items: center;
        .logo {
          height: 50px;
          width: 50px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          height: 35px;
          //   border: 1px solid #000;
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span {
            &:nth-child(1) {
              font-size: 16px;
              color: rgb(26, 26, 26);
            }
            &:nth-child(2) {
              font-size: 14px;
              color: rgb(161, 161, 161);
            }
          }
        }
      }
      .texttlie {
        margin-top: 10px;
        font-size: 16px;
        color: rgb(109, 107, 107);
      }
      .tupiao {
        margin-top: 10px;
        height: 100px;
        // border: 1px solid #000;
        display: flex;
        .tupm {
          width: 100px;
          height: 100%;
          // border: 1px solid #000;
          margin-right: 5px;
          border-radius: 5px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .pingl {
        margin-top: 10px;
        height: 35px;
        // border: 1px solid #000;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        .logos {
          width: 30px;
          height: 30px;
          // border: 1px solid #000;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .gengos {
          width: 30px;
          height: 30px;
          // border: 1px solid #000;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .dianz {
          width: 30px;
          height: 30px;
          // border: 1px solid #000;
          margin-bottom: 5px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 90%;
    height: 375px;

    ul {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      li {
        position: relative;

        flex: 1;
        background-color: #fff;
        .guanb {
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 10px 10px 10px;
          background-color: rgb(145, 186, 224);
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>